<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>百度一下，你就知道</title>
        <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        header{
            width: 100%;
            height: 60px;
            position: fixed;
            z-index: 1;
            top:0;
            background: #fff;
            /* box-shadow: 0px 0px 5px #000; */
        }
        .head_right{
            padding-right: 24px;
            float: right;
        }
        .head_right ul{
            display: inline-block;
            height: 60px;
            /* overflow: hidden; */
        }
        .head_right li{
            line-height: 60px;
            display: inline-block;
            margin-right: 31px;
        }
        .head_right li a{
            font-size: 13px;
            color: #222;
            font-weight: 550;
        }
        .head_right span{
            text-align: center;
            display: inline-block;
            font-size: 13px;
            background: #4E6EF2;
            border-radius: 10px;
            width: 70px;
            height: 30px;
            line-height: 30px;
        }
        .head_right span:hover{
            background: #4662d9;
        }
        main{
            margin: 60px auto 0;
            width: 654px;
            height: 100%;
        }
        .logo{
            width: 190px;
            margin: 100px auto 20px;
        }
        .search{
            font-size: 0;
            position: relative;
        }
        #so{
        height: 40px;
        width: 550px; 
        border-radius: 10px 0 0 10px;
        vertical-align: top;
        border: 2px solid #c4c7ce;
        border-right: none;
        outline: 0;
        font-size: 16px;
        text-indent: 15px;
        line-height: 40px;
        caret-color: violet;
        }
        .search span{
            position: absolute;
            background: url('../../img/xiangji.png') no-repeat;
            width: 24px;
            height: 20px;
            top: 14px;
            right: 125px;
            background-position:0 -51px;
        }
        .search span:hover{
            background-position:0 -75px;
        }
        #btn{
            height: 44px;
            width: 100px;
            background-color: #4e6ef2;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
            color: #fff;
            border: none;
            outline: 0;
        }
        #btn:hover{
            background: #4662d9;
        }
        .code{
            padding-top: 320px;
            text-align: center;
        }
        footer{
            height: 40px;
            width: 100%;
            position: fixed;
            z-index: 1;
            background: #fff;
            bottom: 0;
        }
        .footer_box{
            max-width: 1100px;
            margin: 0 auto;
            line-height: 40px;
            text-align: center;
        }
        .footer_box p{
            display: inline;
            font-size: 12px;
            color: #bbb;
            margin-right: 18px;
        }
        .footer_box p a{
            color: #bbb;
        }
        .footer_box p a:hover{
            color: #000;
        }
    </style>
    <body>
        <header>
            <ul>
                <div class="head_right">
                    <ul>
                        <li><a href="">糯米</a></li>
                        <li><a href="">新闻</a></li>
                        <li><a href="">hao123</a></li>
                        <li><a href="">地图</a></li>
                        <li><a href="">视频</a></li>
                        <li><a href="">贴吧</a></li>
                        <li><a href="" style="font-weight: 500;">登录</a></li>
                        <li><a href="" style="font-weight: 500;">设置</a></li>
                    </ul>
                    <a href="" style="color: #fff;"><span>更多产品</span></a>
                </div>
            </ul>
        </header>
        <main>
            <div class="logo">
                <h1>
                    <img src="img/baidu_jgylogo3.gif" alt="" style="width: 100%;">
                </h1>
            </div>
            <div class="search">
                <form action="">
                    <input type="text" id="so">
                    <span></span>
                    <input type="submit" value="百度一下" id="btn">
                </form>
            </div>
            <div class="code">
                <img src="img/erweima.png" alt="">
                <div>手机百度</div>
            </div>
        </main>
        <footer>
            <div class="footer_box">
                <p><a href="">设为首页</a></p>
                <p><a href="">关于百度</a></p>
                <p><a href="">About Baidu</a></p>
                <p><a href="">百度营销</a></p>
                <p><a href="">使用百度前必读</a></p>
                <p><a href="">意见反馈</a></p>
                <p><a href="">帮助中心</a></p>
                <p><a href="">京公网安备1100000500001号</a></p>
                <p><a href="">京ICP证030173号</a></p>
                <p><span>©2021&nbsp;Baidu&nbsp;</span></p>
                <p style="margin-right:0;"><span>(京)-经营性-2017-0020</span></p>
            </div>
        </footer>
    </body>
</html>